<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <!-- 依 赖 样 式 -->
    <link rel="stylesheet" href="__ADMIN_PATH__/component/pear/css/pear.css" />
    <!-- 加 载 样 式 -->
    <link rel="stylesheet" href="__ADMIN_PATH__/admin/css/loader.css" />
    <!-- 布 局 样 式 -->
    <link rel="stylesheet" href="__ADMIN_PATH__/admin/css/admin.css" />

    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
</head>

<body class="layui-layout-body pear-admin">

<div class="layui-card">
    <div class="layui-card-body">
        <div id="container" style="min-width:400px;height:400px"></div>

    </div>

</div>
<style>
    .layui-form-select{
        /*width: 50%;*/
        display: inline-block;
    }
</style>
<div class="layui-card">
    <h2 class="layui-card-header">
        <blockquote class="layui-elem-quote">
            <span class="layui-badge-dot layui-bg-blue"></span><text style=" display: inline-block;width: 18%;">摩小妹订单交易总流水</text>
            <form class="layui-form" style="display: inline-block;">
                <div class="layui-inline">

                    <select name="month_name" id="check_month" style="width: 40%">
                        <option value="">请选择月份</option>
                        <option value="3">3月</option>
                        <option value="4">4月</option>
                        <option value="5">5月</option>
                        <option value="6">6月</option>
                        <option value="7">7月</option>
                        <option value="8">8月</option>
                                                <option value="9">9月</option>
                        <!--                        <option value="10">10月</option>-->
                        <!--                        <option value="11">11月</option>-->
                        <!--                        <option value="12">12月</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 20%">
                    <!--                        <label class="layui-form-label">输入日期</label>-->
                    <div class="layui-input-inline">
                        <input type="text" name="day_name" placeholder="输入日期" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline" style="display: inline-block">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>

                </div>

            </form>
        </blockquote>
    </h2>
    <div class="layui-card-body">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="tableId" lay-filter="tableFilter"></table>
            </div>
        </div>


    </div>

    <div class="layui-card" style="overflow: hidden">
        <h2 class="layui-card-header">
            <blockquote class="layui-elem-quote">
                <span class="layui-badge-dot layui-bg-blue"></span> 人员统计
            </blockquote>
        </h2>
        <div class="layui-card-body" style="padding-bottom: 5000px;margin-bottom: -5000px;">
            <div class="layui-col-xs5 kongz_h">
                <i class="layui-icon layui-icon-username layui-col-xs3" style="font-size: 40px; color: #1E9FFF;"></i>
                <div class="layui-col-xs9" style="font-size: 20px; color: #1E9FFF;">用户注册人数：{$people['user_num']}</div>
            </div>
            <div class="layui-col-xs5 kongz_h">
                <i class="layui-icon layui-icon-list layui-col-xs3" style="font-size: 40px; color: #1E9FFF;"></i>
                <div class="layui-col-xs9" style="font-size: 20px; color: #1E9FFF;">客户下单总数：{$people['order_num']}</div>
            </div>
            <div class="layui-col-xs5 kongz_h">
                <i class="layui-icon layui-icon-user layui-col-xs3" style="font-size: 40px; color: #1E9FFF;"></i>
                <div class="layui-col-xs9" style="font-size: 20px; color: #1E9FFF;">技师注册人数：{$people['techn_num']}</div>
            </div>
            <div class="layui-col-xs5 kongz_h">
                <i class="layui-icon layui-icon-log layui-col-xs3" style="font-size: 40px; color: #1E9FFF;"></i>
                <div class="layui-col-xs9" style="font-size: 20px; color: #1E9FFF;">技师在线人数：{$people['techn_online']}</div>
            </div>

        </div>
    </div>



    <!--    手风琴-->
    <div class="layui-card">
        <h2 class="layui-card-header">
            <blockquote class="layui-elem-quote">
                <span class="layui-badge-dot layui-bg-blue"></span> <text style=" display: inline-block;width: 18%;">城市排行</text>

            </blockquote>
        </h2>
        <div class="layui-collapse">
            {foreach name="city" item="value"}
            <div class="layui-colla-item">
                <div class="layui-colla-title">{$value.ph_name}</div>
            </div>
            {/foreach}
        </div>
    </div>


    <div class="layui-card layui-col-xs12">
        <h2 class="layui-card-header">
            <blockquote class="layui-elem-quote">
                <span class="layui-badge-dot layui-bg-blue"></span> <text style=" display: inline-block;width: 12%;">技师排行</text>
                <form class="layui-form" style="display: inline-block;width: 70%;">
                    <div class="layui-inline" style="width: 30%">
                        <select name="techn_type" id="techn_type">
                            <option value="">排序方式</option>
                            <option value="1">加钟金额</option>
                            <option value="2">加钟率</option>
                            <option value="3">在线时长</option>
                            <option value="4">周期内营业额</option>
                            <option value="5">积分</option>
                        </select>
                    </div>

                    <div class="layui-inline" style="width: 30%">
                        <select name="techn_zhou" id="techn_zhou" >
                            <option value="">周期</option>
                            <option value="1">全部</option>
                            <option value="2">本月</option>
                            <option value="3">本周</option>
                            <option value="4">上周期</option>
                        </select>
                    </div>

                    <div class="layui-inline" style="display: inline-block">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="techn_ph">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>

                    </div>

                </form>
            </blockquote>
        </h2>
        <div class="layui-card-body">

            <div class="layui-collapse">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="techn_ph" lay-filter="tableFilter"></table>
                    </div>
                </div>
            </div>

        </div>

    </div>





</div>

</body>

<style>

    .kongz_h{
        height: 40px;
        margin: 10px;
    }
    .right_check{
        position: relative;
        right: -80px;
    }
</style>
<script src="__ADMIN_PATH__/component/layui/layui.js"></script>
<script src="__ADMIN_PATH__/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery','common', 'popup', 'loading'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var popup = layui.popup;
        let loading = layui.loading;

        let articleTable = table.render({
            elem: '#tableId',
            method: "post",
            url: "{:url('Index/center_math')}",
            even: true,
            page: false,
            skin: 'line',
            cols: [[
                {field: "timestatus", width:100, title: '时间'},
                {field: "order_money",width:100, title: "交易流水"},
                {field: "refund", width:100,title: "退款金额"},
                {field: "coupon",width:100, title: "优惠券金额"},
                {field: "have_money",width:100, title: "交易净值"},
                {field: "techn_money",width:100, title: "技师服务费"},
                {field: "money_car",width:100, title: "技师车费"},
                {field: "money_user",width:100, title: "渠道扣费"},
                {field: "chouyong",width:100, title: "平台抽佣"},
                {field: "order_num",width:100, title: "订单数量"},
                {field: "order_finish",width:100, title: "完成数量"},
                {field: "cleat_money", title: "利润"},
            ]],

        });

        let techn_ph = table.render({
            elem: '#techn_ph',
            method: "post",
            url: "{:url('Index/techn_ph')}",
            even: true,
            page: false,
            skin: 'line',
            cols: [[
                {field: "paixu", width:100, title: '排行'},
                {field: "name",width:100, title: "技师"},
                {field: "city",width:100, title: "地区"},
                {field: "all_money",width:100, title: "周期总业绩"},
                {field: "order_num",width:100, title: "加钟单量"},
                {field: "price",width:100, title: "加钟金额"},
                {field: "jzl",width:100, title: "加钟率"},
                {field: "online",width:100,  title: "在线时长"},
                {field: "jifen",  title: "积分"},

            ]],

        });



        form.on('submit(search)', function(data) {
            console.log(data);
            articleTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        form.on('submit(techn_ph)', function(data) {
            console.log(data);
            techn_ph.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });






    });
    var chart = null;
    $.getJSON('/taiyuan/Index/getdata', function (data) {
        chart = Highcharts.chart('container', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: '摩小妹流水统计图'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    '鼠标拖动可以进行缩放' : '手势操作进行缩放'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%H:%M:%S.%L',
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%m-%d',
                    week: '%m-%d',
                    month: '%Y-%m',
                    year: '%Y'
                }
            },
            tooltip: {
                dateTimeLabelFormats: {
                    millisecond: '%H:%M:%S.%L',
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%Y-%m-%d',
                    week: '%m-%d',
                    month: '%Y-%m',
                    year: '%Y'
                }
            },
            yAxis: {
                title: {
                    text: '金额'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, new Highcharts.getOptions().colors[0]],
                            [1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            series: [{
                type: 'area',
                name: '当日交易流水',
                data: data
            }]
        });
    });
</script>

</html>
